<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>电气四班通讯录</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
	$(document).ready(function() 
    	{ 
      	  $(".tablesorter").tablesorter(); 
   	 } 
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
<script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
</head>

<body>

<section id="main" class="column">
  <h4 class="alert_info">亲，如果联系方式和所在地区神马的换了的话，赶紧更新一下吧，否则代表月亮消灭你。</h4>
  
  
  <article class="module width_full">
    <header>
      <h3 class="tabs_involved">通讯录</h3>
      <ul class="tabs">
        <li><a href="#tab1">全部</a></li>
        <li><a href="#tab2">读研</a></li>
        <li><a href="#tab3">工作</a></li>
      </ul>
    </header>
    <div class="tab_container">
      <div id="tab1" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>就业|读研</th>
              <th>地区</th>
              <th>单位|学校</th>
              <th>职业|专业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>陈保需</td>
              <td>男</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>2</td>
              <td>陈慧</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>3</td>
              <td>程刚</td>
              <td>男</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>4</td>
              <td>褚秀梅</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>5</td>
              <td>邓超</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab1 -->
      <div id="tab2" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>读研</th>
              <th>地区</th>
              <th>学校</th>
              <th>专业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>Lorem Ipsum Dolor Sit Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Ipsum Lorem Dolor Sit Amet</td>
              <td>Freebies</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Sit Amet Dolor Ipsum</td>
              <td>Tutorials</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab2 -->
      <div id="tab3" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>就业</th>
              <th>地区</th>
              <th>单位</th>
              <th>职业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>Lorem Ipsum Dolor Sit Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Ipsum Lorem Dolor Sit Amet</td>
              <td>Freebies</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Sit Amet Dolor Ipsum</td>
              <td>Tutorials</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab3 -->
    </div>
    <!-- end of .tab_container -->
  </article>
  
  
  <!--<article class="module width_full">
    <header>
      <h3>Stats</h3>
    </header>
    <div class="module_content">
      <article class="stats_graph">搜索</article>
      <article class="stats_overview">
        <div class="overview_today">
          <p class="overview_day">Today</p>
          <p class="overview_count">1,876</p>
          <p class="overview_type">Hits</p>
          <p class="overview_count">2,103</p>

          <p class="overview_type">Views</p>
        </div>
        <div class="overview_previous">
          <p class="overview_day">Yesterday</p>
          <p class="overview_count">1,646</p>
          <p class="overview_type">Hits</p>
          <p class="overview_count">2,054</p>
          <p class="overview_type">Views</p>
        </div>
      </article>
      <div class="clear"></div>
    </div>
  </article>-->
  <!-- end of stats article -->
  
  
  
  <!-- end of content manager article -->
  <article class="module width_full">
    <header>
      <h3>留言板</h3>
    </header>
    <div class="message_list">
      <div class="module_content">
        <div class="message">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
          <p><strong>John Doe</strong></p>
        </div>
        <div class="message">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
          <p><strong>John Doe</strong></p>
        </div>
        <div class="message">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
          <p><strong>John Doe</strong></p>
        </div>
        <div class="message">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
          <p><strong>John Doe</strong></p>
        </div>
        <div class="message">
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
          <p><strong>John Doe</strong></p>
        </div>
      </div>
    </div>
    <footer>
      <form class="post_message">
        <input type="text" value="留个言先~" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
        <input type="submit" class="btn_post_message" value=""/>
      </form>
    </footer>
  </article>
  <!-- end of messages article -->
  <div class="clear"></div>
  
  <h4 class="alert_warning">A Warning Alert</h4>
  <h4 class="alert_error">An Error Message</h4>
  <h4 class="alert_success">A Success Message</h4>
  <!-- end of styles article -->
  <div class="spacer"></div>
</section>

</body>
</html>
